<template>
  <div id="app">
    <Header class="header" @personInfo="handleOpenPersonInfo" />
    <el-drawer title="个人信息" :visible.sync="drawer" direction="ltr">
      <PersonInfo />
    </el-drawer>
    <router-view />
    <Footer />
  </div>
</template>
<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import PersonInfo from './views/PersonInfo/index.vue';
export default {
  components: { Header, Footer, PersonInfo },
  data() {
    return {
      drawer: false
    }
  },
  methods: {
    handleOpenPersonInfo() {
      this.drawer = true
    }
  }
};
</script>

<style lang="less">
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';
  /* Project id 3867426 */
  src: url('//at.alicdn.com/t/c/font_3867426_jnkhd3gdxa8.woff2?t=1681998004854') format('woff2'),
    url('//at.alicdn.com/t/c/font_3867426_jnkhd3gdxa8.woff?t=1681998004854') format('woff'),
    url('//at.alicdn.com/t/c/font_3867426_jnkhd3gdxa8.ttf?t=1681998004854') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;

  a {
    text-decoration: none;
  }
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: linear-gradient(#121418 1%, rgb(80, 9, 155), #fff 90%);
  margin-top: 60px;
}

.header {
  position: fixed;
  top: 0;
  z-index: 999;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
